<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="x-ua-compatible" content="IE=edg">
    <meta name="viewport" content="width=device-with,initial-scale=1">
    <title>Test18</title>
    <script src="https://cdn.staticfile.org/vue/2.4.2/vue.min.js"></script>
</head>
<body>
<div id="app">
    <nav>

    </nav>
</div>
<script type="text/javascript">
    new Vue({
        el:"#app",
        data:{
            active:"nav1",
        },
        methods:{
            changeActive:function (item) {
                this.active = item
            }
        }
    })
</script>
</body>
<style>
    nav{
        display:inline-block;
        margin:60px auto 45px;
        background-color:#5597b4;
        box-shadow:0 1px 1px #ccc;
        border-radius:2px;
    }

    nav a{
        display:inline-block;
        padding: 18px 30px;
        color:#fff !important;
        font-weight:bold;
        font-size:16px;
        text-decoration:none !important;
        line-height:1;
        text-transform: uppercase;
        background-color:transparent;

        -webkit-transition:background-color 0.25s;
        -moz-transition:background-color 0.25s;
        transition:background-color 0.25s;
    }

    nav a:first-child{
        border-radius:2px 0 0 2px;
    }

    nav a:last-child{
        border-radius:0 2px 2px 0;
    }

    nav.home .home,
    nav.projects .projects,
    nav.services .services,
    nav.contact .contact{
        background-color:#e35885;
    }
</style>
</html>